`s.
```html
Remote video:
Local video:
```
With that, there is nothing more needed for the user interface.
### Step 1: Making an Anonymous Call
When the user clicks on the 'Make Call' button, we want our `makeAnonymousCall` function to retrieve the information needed for the call, then make the call. Since we did not specify default media containers on initialization, we will specify them as we make the call.
```javascript
/*
* Voice and Video Call functionality.
*/
// Variable to keep track of the call.
let callId;
// If call is a regular anonymous one, then we'll use caller & callee
// values, as provided by user (in the text fields of this UI).
// If call is a token-based anonymous one, then caller & callee will
// be obtained from our Node.js https server.
async function makeAnonymousCall() {
let makeATokenBasedAnonymousCall = document.getElementById("make-token-based-anonymous-call").checked;
let caller = document.getElementById("caller").value;
if (!caller && !makeATokenBasedAnonymousCall) {
// For regular anonymous call, ask user to fill in the value
log("Error: Please provide the primary contact for the caller.");
return;
}
let callee = document.getElementById("callee").value;
if (!callee && !makeATokenBasedAnonymousCall) {
// For regular anonymous call, ask user to fill in the value
log("Error: Please provide the primary contact for the callee.");
return;
}
let withVideo = document.getElementById("make-with-video").checked;
// For regular anonymous call, there is no need for credentials
let credentials = {}
// Define our call options. Assume for now it is for a regular anonymous call.
const callOptions = {
from: caller,
video: withVideo,
audio: true
}
```
As previously stated, for token-based anonymous calls, `accountToken`, `fromToken`, `toToken`, and `realm` are required in order to make the anonymous call. See the [Generating Tokens](Generating%20Tokens) section for more information on how to obtain/generate these values. In the CodePen provided below, these values will be obtained from the Node.js https server we provided, as an example.
```javascript
if (makeATokenBasedAnonymousCall) {
// Before attempting to trigger outgoing call, get the actual token values
// from expressjs application server in order to make a token-based anonymous call.
const getTokensRequestUrl = 'https://localhost:3000/callparameters'
let result = await fetch(getTokensRequestUrl)
let data = await result.json()
let accountToken = data.accountToken
let fromToken = data.fromToken
let toToken = data.toToken
let realm = data.realm
caller = data.caller
callee = data.callee
callOptions['from'] = caller
log('Got Account Token: ' + accountToken)
log('Got From Token: ' + fromToken)
log('Got To Token: ' + toToken)
log('Got Realm: ' + realm)
log('Got Caller: ' + caller)
log('Got Callee: ' + callee)
// Build our credentials object.
credentials = {
accountToken,
fromToken,
toToken,
realm
};
log("Making a token-based anonymous call to " + callee);
} else {
// For regular anonymous calls, no extra information is needed.
log("Making a regular anonymous call to " + callee);
}
// Finally, trigger the outgoing anonymous call.
callId = client.call.makeAnonymous(callee, credentials, callOptions);
}
```
The SDK's `makeAnonymousCall` API will return a unique ID that can be used to keep track of the call. This ID is also required be be able to perform operations (i.e., hold/unhold) on the call. See the _Limitations on Anonymous Calls_ section below to see what the caller can and cannot do with the call).
### Step 2: Ending a Call
If our user has an ongoing call, they can end it by providing the call's ID to the SDK's `call.end` function, which is what our demo application will do.
```javascript
// End an ongoing call.
function endCall () {
// Retrieve call state.
let call = client.call.getById(callId)
log('Ending call with ' + call.to)
client.call.end(callId)
}
```
### Step 3: Call Events
As we use call functions, the SDK will emit events that provide feedback about the changes in call state. We will set listeners for these events to keep our demo application informed about state.
#### `call:start`
The `call:start` event informs us that an outgoing call that we made has successfully been initialized, and the callee should receive a notification about the incoming call.
```javascript
// Set listener for successful call starts.
client.on('call:start', function (params) {
log('Call successfully started. Waiting for response.')
})
```
#### `call:error` and `media:error`
The `call:error` event informs us that a problem was encountered with the call. The `media:error` event is more specialized in that it indicates that the call could not be made because webRTC media could not be initialized. Both events provide information about the error that occurred.
```javascript
// Set listener for generic call errors.
client.on('call:error', function (params) {
log('Encountered error on call: ' + params.error.message)
})
// Set listener for call media errors.
client.on('media:error', function (params) {
log('Call encountered media error: ' + params.error.message)
})
```
#### `call:stateChange`
As the call is acted upon (such as answered or rejected), its state will change. We can react to changes in the call by listening for the `call:stateChange` event. For our demo application, we will only act if the call was ended.
```javascript
// Set listener for changes in a call's state.
client.on('call:stateChange', function (params) {
// Retrieve call state.
const call = client.call.getById(params.callId)
if (params.error && params.error.message) {
log('Error: ' + params.error.message)
}
log('Call state changed from ' + params.previous.state + ' to ' + call.state)
// If the call ended, stop tracking the callId.
if (params.state === 'ENDED') {
callId = null
}
})
```
## Step 4: Track Events
The WebRTC JS SDK will also emit track events alongside the call events to notify the application of changes to tracks available for the call.
For this demo application, we will simply render tracks when they are added to the call and unrender them when they are removed from the call. For information about other track events, please see the 'Handling Media Tracks' tutorial.
### `call:tracksAdded`
The `call:tracksAdded` event informs us that new tracks have been added to the call and are available to be rendered. The track(s) may have been added by either the local user or remote user. More information on the track can be retrieved by using the `media.getTrackById` API.
We will use this event to render local visual media and remote audio/visual media into the respective containers whenever new tracks are added to the call.
```javascript
// Set listener for new tracks.
client.on('call:tracksAdded', function (params) {
// Iterate over each trackId to determine how it should be rendered.
params.trackIds.forEach(trackId => {
const track = client.media.getTrackById(trackId)
// Check whether the new track was a local track or not.
if (track.isLocal) {
// Only render local visual media into the local container.
if (track.kind === 'video') {
client.media.renderTracks([trackId], '#local-container')
}
} else {
// Render the remote media into the remote container.
client.media.renderTracks([trackId], '#remote-container')
}
})
})
```
### `call:tracksRemoved`
The `call:tracksRemoved` event informs us that tracks have been removed from a Call. The track may have been removed by either the local user or remote user using the `call.removeMedia` API. Tracks are also removed from Calls
automatically while the Call is on hold.
We will use this event to do the reverse of our `call:tracksAdded` handler by unrendering the tracks.
```javascript
// Set listener for removed tracks.
client.on('call:tracksRemoved', function (params) {
// Iterate over each trackId to determine how to unrender it.
params.trackIds.forEach(trackId => {
const track = client.media.getTrackById(trackId)
// Check whether the ended track was a local track or not.
if (track.isLocal) {
// Remove the track from the local container.
client.media.removeTracks([trackId], '#local-container')
} else {
// Remove the track from the remote container.
client.media.removeTracks([trackId], '#remote-container')
}
})
})
```
## Limitations on Anonymous Calls
Once the Anonymous Call SDK is initialized, it does not receive any incoming call notifications. Therefore, an anonymous user cannot receive calls.
Once an anonymous call is established, the call cannot be transferred in any way using the Anonymous Call SDK.
As an example, when an anonymous caller calls support@company.com, the anonymous caller cannot transfer that call. If needed, the agent should transfer the anonymous caller to another agent.
To summarize, the following actions cannot be performed with the Anonymous Call SDK:
- Accept an incoming call
- Perform any type of call transfer
- Perform a "join" on two ongoing calls
We can now call the demo application done. We've covered the basics of what is needed to allow a user to use call functionality.
## Live Demo
Do you want to try this example for yourself? Click the button below to get started.
### Instructions for Demo
#### Prerequisites (for token-based anonymous calling)
- Make sure you have the key & realm values obtained from your administrator.
- Make sure you have the necessary tokens before proceeding. See [Generating Tokens](Generating%20Tokens).
#### Steps
1. Open one browser or tab instance of Google Chrome®, or (another supported browser), by clicking **Try it** once. This will be the browser instance starting the anonymous call (i.e., _caller_).
2. Go to the 'Voice and Video Calls' tutorial in the _WebRTC JS SDK_ Tutorials, and open one browser or tab instance of Google Chrome® (or another supported browser) by clicking **Try it** once. This will be the browser instance which will answer the call (i.e. _callee_).
3. For the _callee_, enter the appropriate authentication credentials for the account or project.
- Enter the email address of that callee user (account or project users).
- Enter the password to authenticate.
4. For the anonymous _caller_, do the following:
- Specify if you want the call to include video (otherwise it will be an audio-only call, by default).
- For regular anonymous calls to the callee, ensure the 'Make a token-based call' checkbox is unchecked.
- Enter the primary contact of the _caller_ in the specified text field.
- Enter the primary contact of the _callee_ in the specified text field.
- For token-based anonymous call to the callee, ensure 'Make a token-based call' checkbox is checked.
- In this case, ensure that your Node.js HTTPS server is started. We've provided a sample server, and this server can be started using the `yarn start` command.
- NOTE: If using the sample server, you will need to replace the dummy values specified in the `index.js` file of the sample server (lines 30-35) with your own values. Also, a key and certificate file will be needed to start the server with HTTPS (lines 14-17).
- Once the sample server has been started, the codepen will interact with the server to retrieve the necessary parameters for making a token-based anonymous call at the time the anonymous call is made.
5. Click **Make Call** to start the anonymous call to the _callee_.
6. Accept the incoming call from the _callee_. The two parties should now be in an established call.
7. Click **End Call** in either browser instance to end the call.
_Note: You’ll be sent to an external website._